﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="UI/API/1.7/Draggable" />
		<title>UI/API/1.7/Draggable - jQuery JavaScript Library</title>
		<link rel="stylesheet" href="style/reset.css" type="text/css" />
		<link rel="stylesheet" href="style/screen.css" type="text/css" />
		<style type="text/css" media="screen,projection">/*<![CDATA[*/ @import "http://www.winswd.com/aboutme/jquery/ui/style/main.css?9"; /*]]>*/</style>

		<link rel="stylesheet" type="text/css" href="style/jquery.tabs.css" />
		<!--[if lte IE 7]>
		<link rel="stylesheet" href="style/jquery.tabs-ie.css" type="text/css" media="projection, screen"/>
		<![endif]-->

		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script src="js/jquery.tabs.js"></script>

		<script>$(function(){
			$("div[id=examples]").each(function(){
				$(this).siblings("div:first").find("div.desc").after(
					$(this).find("div.example:has(#demo):first").remove().clone());

				if ( !$("div.example", this).length )
					$(this).remove();
			});

			$("div.entry")
				.children("p").remove().end()
				.find("ul:first li").each(function(){
					if ( !$(this).parent().siblings( $("a",this).attr("href") ).length )
						$(this).remove();
				}).end()
				.not(".ui")
				.tabs();

			$("div.args > br").remove();

			$("div.example")
				.children("p").remove().end()
				.tabs();

			var keywords = "String,Number,Object,Options,Array,Function,Callback,Selector,Event,Element,Integer,Float,Boolean".split(",");

			$("td.default span, td.type").each(function(){
				var html = this.innerHTML;
				jQuery.each(keywords, function(i,key){
					html = html.replace(new RegExp(key, "ig"), "<a href='/Types#" + key + "'>" + key + "</a>");
				});
				this.innerHTML = html;
			});

			$("div[id=source]").each(function(){
				var source = $("pre", this).html()
					.replace(/<\/?a.*?>/ig, "")
					.replace(/<\/?strong.*?>/ig, "")
					.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&");

				//var items = [];
				//source = source.replace(/\s*<(link|script).*?>\s\*/g, function(m){
					//items.push(m);
					//return "";
				//}).replace("</head>", items.join("") + "</head>")
				//*/

				var iframe = document.createElement("iframe");
				iframe.src = "";
				iframe.width = "100%";
				iframe.height = $(this).prev().attr("rel") || "125";
				iframe.style.border = "none";
				$(this).prev().append(iframe);


				$(window).load(function(){
					var doc = iframe.contentDocument || iframe.contentWindow.document;
					source = source
						// IE needs to wait for the script to load (?)
						.replace("$(document).ready(function(){", "window.onload = (function(){try{")
						.replace(/}\);\s*<\/sc/, "}catch(e){}});</sc")
						//.replace("http://code.jquery.com/jquery-latest.js", "http://code.jquery.com/jquery-1.3rc2.js")
						.replace("</head>", "<style>html,body{border:0; margin:0; padding:0;}</style></head>");
					doc.open();
					doc.write( source );
					doc.close();
				});

			});
		});</script>
		<script type="text/javascript" src="js/custom.js"></script>
		<!--[if lt IE 5.5000]><style type="text/css">@import "http://www.winswd.com/aboutme/jquery/ui/style/IE50Fixes.css";</style><![endif]-->
		<!--[if IE 5.5000]><style type="text/css">@import "http://www.winswd.com/aboutme/jquery/ui/style/IE55Fixes.css";</style><![endif]-->
		<!--[if IE 6]><style type="text/css">@import "http://www.winswd.com/aboutme/jquery/ui/style/IE60Fixes.css";</style><![endif]-->
		<!--[if IE 7]><style type="text/css">@import "http://www.winswd.com/aboutme/jquery/ui/style/IE70Fixes.css?1";</style><![endif]-->
		<!--[if lt IE 7]><script type="text/javascript" src="http://www.winswd.com/aboutme/jquery/ui/style/IEFixes.js"></script>
		<meta http-equiv="imagetoolbar" content="no" /><![endif]-->
		
		<!-- Head Scripts -->
			</head>
	<body id="jq-interior"  class="mediawiki ns-0 ltr">


<!-- Copyright � 2005. Spidersoft Ltd -->
<style>
A.applink:hover {border: 2px dotted #DCE6F4;padding:2px;background-color:#ffff00;color:green;text-decoration:none}
A.applink       {border: 2px dotted #DCE6F4;padding:2px;color:#2F5BFF;background:transparent;text-decoration:none}
A.info          {color:#2F5BFF;background:transparent;text-decoration:none}
A.info:hover    {color:green;background:transparent;text-decoration:underline}
</style>





	<div id="jq-siteContain">
			<div id="jq-content" class="jq-clearfix">

				<div id="jq-interiorNavigation">
					<div class='jq-portlet' id='jq-p-Getting-Started'>
						<h5></h5>
						<div class='jq-pBody'>
							<ul>
								<li id="jq-ui-doc-n-Draggable"><a href="Draggable.html">Draggable</a></li>
								<li id="jq-ui-doc-n-Droppable"><a href="Droppable.html">Droppable</a></li>				
								<li id="jq-ui-doc-n-Resizable"><a href="Resizable.html">Resizable</a></li>
								<li id="jq-ui-doc-n-Selectable"><a href="Selectable.html">Selectable</a></li>
								<li id="jq-ui-doc-n-Sortable"><a href="Sortable.html">Sortable</a></li>
							</ul>				
						</div>
					</div>
						<div class='jq-portlet' id='jq-p-API-Reference'>
						<h5>部件</h5>
						<div class='jq-pBody'>
							<ul>
								<li id="jq-ui-doc-n-Accordion"><a href="Accordion.html">Accordion</a></li>
								<li id="jq-ui-doc-n-Datepicker"><a href="Datepicker.html">Datepicker</a></li>				
								<li id="jq-ui-doc-n-Dialog"><a href="Dialog.html">Dialog</a></li>
								<li id="jq-ui-doc-n-Progressbar"><a href="Progressbar.html">Progressbar</a></li>
								<li id="jq-ui-doc-n-Slider"><a href="Slider.html">Slider</a></li>
								<li id="jq-ui-doc-n-Tabs"><a href="Tabs.html">Tabs</a></li>
							</ul>
						</div>
					</div>
						<div class='jq-portlet' id='jq-p-Plugins'>
				
						<h5>动画</h5>
						<div class='jq-pBody'>
							<ul>
								<li id="jq-ui-doc-n-AddClass"><a href="AddClass.html">AddClass</a></li>
								<li id="jq-ui-doc-n-RemoveClass"><a href="RemoveClass.html">RemoveClass</a></li>
                                <li id="jq-ui-doc-n-Animate"><a href="Animate.html">Animate</a></li>
                                <li id="jq-ui-doc-n-Effect"><a href="Effect.html">Effect</a></li>
                                <li id="jq-ui-doc-n-Hide"><a href="Hide.html">Hide</a></li>
                                <li id="jq-ui-doc-n-Show"><a href="Show.html">Show</a></li>
                                <li id="jq-ui-doc-n-SwitchClass"><a href="SwitchClass.html">SwitchClass</a></li>
                                <li id="jq-ui-doc-n-Toggle"><a href="Toggle.html">Toggle</a></li>
                                <li id="jq-ui-doc-n-ToggleClass"><a href="ToggleClass.html">ToggleClass</a></li>
							</ul>
						</div>				
					</div>					
				</div><!-- /#interiorNavigation -->

				<div id="jq-primaryContent">
		<div id="column-content">
	<div id="docs-content">
		<a name="top" id="top"></a>
				<h1 class="firstHeading">UI/API/1.7/Sortable</h1>
		<div id="bodyContent">
<!-- start content -->



<ul class="UIAPIPlugin-toc">
<li><a href="#overview">概述</a></li>
<li><a href="#options">参数</a></li>
<li><a href="#events">事件</a></li>
<li><a href="#methods">方法</a></li>
<li><a href="#theming">主题</a></li>
</ul>
<div class="UIAPIPlugin">
  <h1>jQuery UI Sortable</h1>
  <div id="overview">
    <h2 class="top-header">概述</h2>
    <div id="overview-main">
        <p>jQuery UI Sortable 插件使选中的元素伴随鼠标拖动实现排序.</p>
<p>所有的回调函数接受两个参数: 浏览器事件和ui对象, 此对象请查看下面的文档 :</p>
<ul>
<li><b>ui.helper</b> - 当前的辅助对象(多数为元素的克隆)</li>
<li><b>ui.position</b> - 当前辅助对象的位置</li>
<li><b>ui.offset</b> - 当前辅助对象的绝对位置</li>
<li><b>ui.item</b> - 当前拖动的元素</li>
<li><b>ui.placeholder</b> - 占位对象(如果有定义的话)</li>
<li><b>ui.sender</b> - 排序对象元素的来源对象(只有当你将一个对象移动到另一个列表时存在)</li>
</ul>
    </div>
    <div id="overview-dependencies">
        <h3>其他附加文件</h3>
        <ul>
<li>UI Core</li>
</ul>
    </div>
    <div id="overview-example">
        <h3>示例</h3>
        <div id="overview-example" class="example">
<ul><li><a href="#demo"><span>代码示范</span></a></li><li><a href="#source"><span>查看源文件</span></a></li></ul>
<p><div id="demo" class="tabs-container" rel="100">
简单的jQuery UI Sortable.<br />
</p>
<pre>$(&quot;#sortable&quot;).sortable();
</pre>
<p></div><div id="source" class="tabs-container">
</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;link type=&quot;text/css&quot; href=&quot;themes/base/ui.all.css&quot; rel=&quot;stylesheet&quot; /&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;ui/ui.core.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;ui/ui.sortable.js&quot;&gt;&lt;/script&gt;
  &lt;style type=&quot;text/css&quot;&gt;
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
    html&gt;body #sortable li { height: 1.5em; line-height: 1.2em; }
    .ui-state-highlight { height: 1.5em; line-height: 1.2em; }
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
    $(document).ready(function(){
      $(&quot;#sortable&quot;).sortable({
        placeholder: 'ui-state-highlight'
      });
      $(&quot;#sortable&quot;).disableSelection();
    });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body style=&quot;font-size:62.5%;&quot;&gt;
  
&lt;ul id=&quot;sortable&quot;&gt;
  &lt;li class=&quot;ui-state-default&quot;&gt;Item 1&lt;/li&gt;
  &lt;li class=&quot;ui-state-default&quot;&gt;Item 2&lt;/li&gt;
  &lt;li class=&quot;ui-state-default&quot;&gt;Item 3&lt;/li&gt;
  &lt;li class=&quot;ui-state-default&quot;&gt;Item 4&lt;/li&gt;
  &lt;li class=&quot;ui-state-default&quot;&gt;Item 5&lt;/li&gt;
  &lt;li class=&quot;ui-state-default&quot;&gt;Item 6&lt;/li&gt;
  &lt;li class=&quot;ui-state-default&quot;&gt;Item 7&lt;/li&gt;
&lt;/ul&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<p></div>
</p><p></div>
    </div>
  </div>
  <div id="options">
    <h2 class="top-header">参数</h2>
    <ul class="options-list">
      
<li class="option" id="option-appendTo">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-appendTo">appendTo</a></h3>
    <dl>
      <dt class="option-type-label">类型:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">默认值:</dt>
        <dd class="option-default">'parent'</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>定义可移动的辅助元素在拖动时可以被添加到何处 (例如, 解决重叠/ zIndex问题).</p>
  </div>
  <div class="option-examples">
    <h4>代码示例</h4>
    <dl class="option-examples-list">
    
<dt>
  使用指定的<code>appendTo</code>参数初始化一个sortable.
</dt>
<dd>
<pre><code>$('.selector').sortable({ appendTo: 'body' });</code></pre>
</dd>

    
<dt>
  在初始化后设置或者获取<code>appendTo</code>参数.
</dt>
<dd>
<pre><code>//获取
var appendTo = $('.selector').sortable('option', 'appendTo');
//设置
$('.selector').sortable('option', 'appendTo', 'body');</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-axis">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-axis">axis</a></h3>
    <dl>
      <dt class="option-type-label">类型:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">默认值:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>如果定义了该参数, 元素可以在水平或垂直方向或者两者上实现拖动. 允许使用的值:'x', 'y'.</p>
  </div>
  <div class="option-examples">
    <h4>代码示例</h4>
    <dl class="option-examples-list">
    
<dt>
  使用指定的<code>axis</code>参数初始化一个sortable.
</dt>
<dd>
<pre><code>$('.selector').sortable({ axis: 'x' });</code></pre>
</dd>

    
<dt>
  在初始化后设置或者获取<code>axis</code>参数.
</dt>
<dd>
<pre><code>//获取
var axis = $('.selector').sortable('option', 'axis');
//设置
$('.selector').sortable('option', 'axis', 'x');</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-cancel">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-cancel">cancel</a></h3>
    <dl>
      <dt class="option-type-label">类型:</dt>
        <dd class="option-type">Selector</dd>
      
      <dt class="option-default-label">默认值:</dt>
        <dd class="option-default">':input,button'</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>对符合选择器匹配规则的元素不进行排序.</p>
  </div>
  <div class="option-examples">
    <h4>代码示例</h4>
    <dl class="option-examples-list">
    
<dt>
  使用指定的<code>cancel</code>参数初始化一个sortable.
</dt>
<dd>
<pre><code>$('.selector').sortable({ cancel: 'button' });</code></pre>
</dd>

    
<dt>
  在初始化后设置或者获取<code>cancel</code>参数.
</dt>
<dd>
<pre><code>//获取
var cancel = $('.selector').sortable('option', 'cancel');
//设置
$('.selector').sortable('option', 'cancel', 'button');</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-connectWith">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-connectWith">connectWith</a></h3>
    <dl>
      <dt class="option-type-label">类型:</dt>
        <dd class="option-type">Selector</dd>
      
      <dt class="option-default-label">默认值:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>使用jQuery选择器使对象也同时具有接收当前sortables项的能力.如果启用, sortable对象现在连接到另一条途径上, 所以你可以移动他从这个sortable到另一个.</p>
  </div>
  <div class="option-examples">
    <h4>代码示例</h4>
    <dl class="option-examples-list">
    
<dt>
  使用指定的<code>connectWith</code>参数初始化一个sortable.
</dt>
<dd>
<pre><code>$('.selector').sortable({ connectWith: '.otherlist' });</code></pre>
</dd>

    
<dt>
  在初始化后设置或者获取<code>connectWith</code>参数.
</dt>
<dd>
<pre><code>//获取
var connectWith = $('.selector').sortable('option', 'connectWith');
//设置
$('.selector').sortable('option', 'connectWith', '.otherlist');</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-containment">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-containment">containment</a></h3>
    <dl>
      <dt class="option-type-label">类型:</dt>
        <dd class="option-type">Element, String, Selector</dd>
      
      <dt class="option-default-label">默认值:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>限制拖动范围在指定的DOM元素内,'parent', 'document', 'window',或者一个jQuery选择器所指定的范围.</p>
  </div>
  <div class="option-examples">
    <h4>代码示例</h4>
    <dl class="option-examples-list">
    
<dt>
  使用指定的<code>containment</code>参数初始化一个sortable.
</dt>
<dd>
<pre><code>$('.selector').sortable({ containment: 'parent' });</code></pre>
</dd>

    
<dt>
  在初始化后设置或者获取<code>containment</code>参数.
</dt>
<dd>
<pre><code>//获取
var containment = $('.selector').sortable('option', 'containment');
//设置
$('.selector').sortable('option', 'containment', 'parent');</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-cursor">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-cursor">cursor</a></h3>
    <dl>
      <dt class="option-type-label">类型:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">默认值:</dt>
        <dd class="option-default">'auto'</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>定义排序拖动时的鼠标指针样式.</p>
  </div>
  <div class="option-examples">
    <h4>代码示例</h4>
    <dl class="option-examples-list">
    
<dt>
  使用指定的<code>cursor</code>参数初始化一个sortable.
</dt>
<dd>
<pre><code>$('.selector').sortable({ cursor: 'crosshair' });</code></pre>
</dd>

    
<dt>
  在初始化后设置或者获取<code>cursor</code>参数.
</dt>
<dd>
<pre><code>//获取
var cursor = $('.selector').sortable('option', 'cursor');
//设置
$('.selector').sortable('option', 'cursor', 'crosshair');</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-cursorAt">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-cursorAt">cursorAt</a></h3>
    <dl>
      <dt class="option-type-label">类型:</dt>
        <dd class="option-type">Object</dd>
      
      <dt class="option-default-label">默认值:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>拖动排序对象时鼠标指针始终在同一个指定位置. 坐标可使用散列或者相结合的一个或两个键值: <code>{ top, left, right, bottom }</code>.</p>
  </div>
  <div class="option-examples">
    <h4>代码示例</h4>
    <dl class="option-examples-list">
    
<dt>
  使用指定的<code>cursorAt</code>参数初始化一个sortable.
</dt>
<dd>
<pre><code>$('.selector').sortable({ cursorAt: 'top' });</code></pre>
</dd>

    
<dt>
  在初始化后设置或者获取<code>cursorAt</code>参数.
</dt>
<dd>
<pre><code>//获取
var cursorAt = $('.selector').sortable('option', 'cursorAt');
//设置
$('.selector').sortable('option', 'cursorAt', 'top');</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-delay">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-delay">delay</a></h3>
    <dl>
      <dt class="option-type-label">类型:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">默认值:</dt>
        <dd class="option-default">0</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>在排序拖动开始多少毫秒后元素才开始移动. 这可以防止意外的点击造成元素的拖动.</p>
  </div>
  <div class="option-examples">
    <h4>代码示例</h4>
    <dl class="option-examples-list">
    
<dt>
  使用指定的<code>delay</code>参数初始化一个sortable.
</dt>
<dd>
<pre><code>$('.selector').sortable({ delay: 500 });</code></pre>
</dd>

    
<dt>
  在初始化后设置或者获取<code>delay</code>参数.
</dt>
<dd>
<pre><code>//获取
var delay = $('.selector').sortable('option', 'delay');
//设置
$('.selector').sortable('option', 'delay', 500);</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-distance">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-distance">distance</a></h3>
    <dl>
      <dt class="option-type-label">类型:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">默认值:</dt>
        <dd class="option-default">1</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>设置当排序拖动开始多少个像素之后元素才开始移动. 如果指定了该参数, 排序不会马上开始,知道鼠标移动达到了指定的像素值. </p>
  </div>
  <div class="option-examples">
    <h4>代码示例</h4>
    <dl class="option-examples-list">
    
<dt>
  使用指定的<code>distance</code>参数初始化一个sortable.
</dt>
<dd>
<pre><code>$('.selector').sortable({ distance: 30 });</code></pre>
</dd>

    
<dt>
  在初始化后设置或者获取<code>distance</code>参数.
</dt>
<dd>
<pre><code>//获取
var distance = $('.selector').sortable('option', 'distance');
//设置
$('.selector').sortable('option', 'distance', 30);</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-dropOnEmpty">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-dropOnEmpty">dropOnEmpty</a></h3>
    <dl>
      <dt class="option-type-label">类型:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">默认值:</dt>
        <dd class="option-default">true</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>如果为空允许从一个链接的selectable中的元素进行填充.</p>
  </div>
  <div class="option-examples">
    <h4>代码示例</h4>
    <dl class="option-examples-list">
    
<dt>
  使用指定的<code>dropOnEmpty</code>参数初始化一个sortable.
</dt>
<dd>
<pre><code>$('.selector').sortable({ dropOnEmpty: false });</code></pre>
</dd>

    
<dt>
  在初始化后设置或者获取<code>dropOnEmpty</code>参数.
</dt>
<dd>
<pre><code>//获取
var dropOnEmpty = $('.selector').sortable('option', 'dropOnEmpty');
//设置
$('.selector').sortable('option', 'dropOnEmpty', false);</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-forceHelperSize">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-forceHelperSize">forceHelperSize</a></h3>
    <dl>
      <dt class="option-type-label">类型:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">默认值:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>如果为真, 强迫辅助对象有一个大小.</p>
  </div>
  <div class="option-examples">
    <h4>代码示例</h4>
    <dl class="option-examples-list">
    
<dt>
  使用指定的<code>forceHelperSize</code>参数初始化一个sortable.
</dt>
<dd>
<pre><code>$('.selector').sortable({ forceHelperSize: true });</code></pre>
</dd>

    
<dt>
  在初始化后设置或者获取<code>forceHelperSize</code>参数.
</dt>
<dd>
<pre><code>//获取
var forceHelperSize = $('.selector').sortable('option', 'forceHelperSize');
//设置
$('.selector').sortable('option', 'forceHelperSize', true);</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-forcePlaceholderSize">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-forcePlaceholderSize">forcePlaceholderSize</a></h3>
    <dl>
      <dt class="option-type-label">类型:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">默认值:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>如果为真, 强迫占位符有一个大小.</p>
  </div>
  <div class="option-examples">
    <h4>代码示例</h4>
    <dl class="option-examples-list">
    
<dt>
  使用指定的<code>forcePlaceholderSize</code>参数初始化一个sortable.
</dt>
<dd>
<pre><code>$('.selector').sortable({ forcePlaceholderSize: true });</code></pre>
</dd>

    
<dt>
  在初始化后设置或者获取<code>forcePlaceholderSize</code>参数.
</dt>
<dd>
<pre><code>//获取
var forcePlaceholderSize = $('.selector').sortable('option', 'forcePlaceholderSize');
//设置
$('.selector').sortable('option', 'forcePlaceholderSize', true);</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-grid">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-grid">grid</a></h3>
    <dl>
      <dt class="option-type-label">类型:</dt>
        <dd class="option-type">Array</dd>
      
      <dt class="option-default-label">默认值:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>设置排序对象或者辅助对象有一个x和y边距,(单位:像素). 数组值: [x, y]</p>
  </div>
  <div class="option-examples">
    <h4>代码示例</h4>
    <dl class="option-examples-list">
    
<dt>
  使用指定的<code>grid</code>参数初始化一个sortable.
</dt>
<dd>
<pre><code>$('.selector').sortable({ grid: [50, 20] });</code></pre>
</dd>

    
<dt>
  在初始化后设置或者获取<code>grid</code>参数.
</dt>
<dd>
<pre><code>//获取
var grid = $('.selector').sortable('option', 'grid');
//设置
$('.selector').sortable('option', 'grid', [50, 20]);</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-handle">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-handle">handle</a></h3>
    <dl>
      <dt class="option-type-label">类型:</dt>
        <dd class="option-type">Selector, Element</dd>
      
      <dt class="option-default-label">默认值:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>如果设定了此参数,那么拖动会在对象内指定的元素上开始.</p>
  </div>
  <div class="option-examples">
    <h4>代码示例</h4>
    <dl class="option-examples-list">
    
<dt>
  使用指定的<code>handle</code>参数初始化一个sortable.
</dt>
<dd>
<pre><code>$('.selector').sortable({ handle: 'h2' });</code></pre>
</dd>

    
<dt>
  在初始化后设置或者获取<code>handle</code>参数.
</dt>
<dd>
<pre><code>//获取
var handle = $('.selector').sortable('option', 'handle');
//设置
$('.selector').sortable('option', 'handle', 'h2');</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-helper">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-helper">helper</a></h3>
    <dl>
      <dt class="option-type-label">类型:</dt>
        <dd class="option-type">String, Function</dd>
      
      <dt class="option-default-label">默认值:</dt>
        <dd class="option-default">'original'</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>允许使用一个辅助元素来进行拖动时展示. 所提供的函数在拖动时接受事件和对象元素, 并且需要返回一个DOMElement对象用来当作辅助对象. 允许使用的值: 'original', 'clone'</p>
  </div>
  <div class="option-examples">
    <h4>代码示例</h4>
    <dl class="option-examples-list">
    
<dt>
  使用指定的<code>helper</code>参数初始化一个sortable.
</dt>
<dd>
<pre><code>$('.selector').sortable({ helper: 'clone' });</code></pre>
</dd>

    
<dt>
  在初始化后设置或者获取<code>helper</code>参数.
</dt>
<dd>
<pre><code>//获取
var helper = $('.selector').sortable('option', 'helper');
//设置
$('.selector').sortable('option', 'helper', 'clone');</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-items">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-items">items</a></h3>
    <dl>
      <dt class="option-type-label">类型:</dt>
        <dd class="option-type">Selector</dd>
      
      <dt class="option-default-label">默认值:</dt>
        <dd class="option-default">'&gt; *'</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>指定对象中的哪些元素可以用来排序.</p>
  </div>
  <div class="option-examples">
    <h4>代码示例</h4>
    <dl class="option-examples-list">
    
<dt>
  使用指定的<code>items</code>参数初始化一个sortable.
</dt>
<dd>
<pre><code>$('.selector').sortable({ items: 'li' });</code></pre>
</dd>

    
<dt>
  在初始化后设置或者获取<code>items</code>参数.
</dt>
<dd>
<pre><code>//获取
var items = $('.selector').sortable('option', 'items');
//设置
$('.selector').sortable('option', 'items', 'li');</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-opacity">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-opacity">opacity</a></h3>
    <dl>
      <dt class="option-type-label">类型:</dt>
        <dd class="option-type">Float</dd>
      
      <dt class="option-default-label">默认值:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>定义拖动时辅助对象的不透明度. 范围: 0.01 ~ 1</p>
  </div>
  <div class="option-examples">
    <h4>代码示例</h4>
    <dl class="option-examples-list">
    
<dt>
  使用指定的<code>opacity</code>参数初始化一个sortable.
</dt>
<dd>
<pre><code>$('.selector').sortable({ opacity: 0.6 });</code></pre>
</dd>

    
<dt>
  在初始化后设置或者获取<code>opacity</code>参数.
</dt>
<dd>
<pre><code>//获取
var opacity = $('.selector').sortable('option', 'opacity');
//设置
$('.selector').sortable('option', 'opacity', 0.6);</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-placeholder">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-placeholder">placeholder</a></h3>
    <dl>
      <dt class="option-type-label">类型:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">默认值:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>设置添加处的样式,否则使用空白.</p>
  </div>
  <div class="option-examples">
    <h4>代码示例</h4>
    <dl class="option-examples-list">
    
<dt>
  使用指定的<code>placeholder</code>参数初始化一个sortable.
</dt>
<dd>
<pre><code>$('.selector').sortable({ placeholder: '.ui-state-highlight' });</code></pre>
</dd>

    
<dt>
  在初始化后设置或者获取<code>placeholder</code>参数.
</dt>
<dd>
<pre><code>//获取
var placeholder = $('.selector').sortable('option', 'placeholder');
//设置
$('.selector').sortable('option', 'placeholder', '.ui-state-highlight');</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-revert">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-revert">revert</a></h3>
    <dl>
      <dt class="option-type-label">类型:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">默认值:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>如果设置为true, 元素在回到它在DOM中的新位置时将执行一段动画.</p>
  </div>
  <div class="option-examples">
    <h4>代码示例</h4>
    <dl class="option-examples-list">
    
<dt>
  使用指定的<code>revert</code>参数初始化一个sortable.
</dt>
<dd>
<pre><code>$('.selector').sortable({ revert: true });</code></pre>
</dd>

    
<dt>
  在初始化后设置或者获取<code>revert</code>参数.
</dt>
<dd>
<pre><code>//获取
var revert = $('.selector').sortable('option', 'revert');
//设置
$('.selector').sortable('option', 'revert', true);</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-scroll">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-scroll">scroll</a></h3>
    <dl>
      <dt class="option-type-label">类型:</dt>
        <dd class="option-type">Boolean</dd>
      
      <dt class="option-default-label">默认值:</dt>
        <dd class="option-default">true</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>如果设置为true, 页面会在事件到大窗体边缘时滚动.</p>
  </div>
  <div class="option-examples">
    <h4>代码示例</h4>
    <dl class="option-examples-list">
    
<dt>
  使用指定的<code>scroll</code>参数初始化一个sortable.
</dt>
<dd>
<pre><code>$('.selector').sortable({ scroll: false });</code></pre>
</dd>

    
<dt>
  在初始化后设置或者获取<code>scroll</code>参数.
</dt>
<dd>
<pre><code>//获取
var scroll = $('.selector').sortable('option', 'scroll');
//设置
$('.selector').sortable('option', 'scroll', false);</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-scrollSensitivity">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-scrollSensitivity">scrollSensitivity</a></h3>
    <dl>
      <dt class="option-type-label">类型:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">默认值:</dt>
        <dd class="option-default">20</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>定义当鼠标距离窗体边缘多近时开始执行滚动.</p>
  </div>
  <div class="option-examples">
    <h4>代码示例</h4>
    <dl class="option-examples-list">
    
<dt>
  使用指定的<code>scrollSensitivity</code>参数初始化一个sortable.
</dt>
<dd>
<pre><code>$('.selector').sortable({ scrollSensitivity: 40 });</code></pre>
</dd>

    
<dt>
  在初始化后设置或者获取<code>scrollSensitivity</code>参数.
</dt>
<dd>
<pre><code>//获取
var scrollSensitivity = $('.selector').sortable('option', 'scrollSensitivity');
//设置
$('.selector').sortable('option', 'scrollSensitivity', 40);</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-scrollSpeed">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-scrollSpeed">scrollSpeed</a></h3>
    <dl>
      <dt class="option-type-label">类型:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">默认值:</dt>
        <dd class="option-default">20</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>定义当鼠标满足scrollSensitivity窗体需要执行滚动时的滚动速度.</p>
  </div>
  <div class="option-examples">
    <h4>代码示例</h4>
    <dl class="option-examples-list">
    
<dt>
  使用指定的<code>scrollSpeed</code>参数初始化一个sortable.
</dt>
<dd>
<pre><code>$('.selector').sortable({ scrollSpeed: 40 });</code></pre>
</dd>

    
<dt>
  在初始化后设置或者获取<code>scrollSpeed</code>参数.
</dt>
<dd>
<pre><code>//获取
var scrollSpeed = $('.selector').sortable('option', 'scrollSpeed');
//设置
$('.selector').sortable('option', 'scrollSpeed', 40);</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-tolerance">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-tolerance">tolerance</a></h3>
    <dl>
      <dt class="option-type-label">类型:</dt>
        <dd class="option-type">String</dd>
      
      <dt class="option-default-label">默认值:</dt>
        <dd class="option-default">'intersect'</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>这是在拖动时重新排序的方式. 允许使用的值: 'intersect', 'pointer'. 在一些设置中, 'pointer' 是自然的.</p>
  </div>
  <div class="option-examples">
    <h4>代码示例</h4>
    <dl class="option-examples-list">
    
<dt>
  使用指定的<code>tolerance</code>参数初始化一个sortable.
</dt>
<dd>
<pre><code>$('.selector').sortable({ tolerance: 'pointer' });</code></pre>
</dd>

    
<dt>
  在初始化后设置或者获取<code>tolerance</code>参数.
</dt>
<dd>
<pre><code>//获取
var tolerance = $('.selector').sortable('option', 'tolerance');
//设置
$('.selector').sortable('option', 'tolerance', 'pointer');</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="option" id="option-zIndex">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-zIndex">zIndex</a></h3>
    <dl>
      <dt class="option-type-label">类型:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">默认值:</dt>
        <dd class="option-default">1000</dd>
      
    </dl>
  </div>
  <div class="option-description">
    <p>元素/辅助对象在拖动时的Z-index值.</p>
  </div>
  <div class="option-examples">
    <h4>代码示例</h4>
    <dl class="option-examples-list">
    
<dt>
  使用指定的<code>zIndex</code>参数初始化一个sortable.
</dt>
<dd>
<pre><code>$('.selector').sortable({ zIndex: 5 });</code></pre>
</dd>

    
<dt>
  在初始化后设置或者获取<code>zIndex</code>参数.
</dt>
<dd>
<pre><code>//获取
var zIndex = $('.selector').sortable('option', 'zIndex');
//设置
$('.selector').sortable('option', 'zIndex', 5);</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="events">
    <h2 class="top-header">事件</h2>
    <ul class="events-list">
      
<li class="event" id="event-start">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-start">start</a></h3>
    <dl>
      <dt class="event-type-label">类型:</dt>
        <dd class="event-type">sortstart</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>这个事件在排序开始时触发.</p>
  </div>
  <div class="event-examples">
    <h4>代码示例</h4>
    <dl class="event-examples-list">
    
<dt>
  提供一个回调函数对<code>start</code>事件进行操作.
</dt>
<dd>
<pre><code>$('.selector').sortable({
   start: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  使用<code>sortstart</code>类型来绑定<code>start</code>事件.
</dt>
<dd>
<pre><code>$('.selector').bind('sortstart', function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-sort">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-sort">sort</a></h3>
    <dl>
      <dt class="event-type-label">类型:</dt>
        <dd class="event-type">sort</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>这个事件在排序时触发.</p>
  </div>
  <div class="event-examples">
    <h4>代码示例</h4>
    <dl class="event-examples-list">
    
<dt>
  提供一个回调函数对<code>sort</code>事件进行操作.
</dt>
<dd>
<pre><code>$('.selector').sortable({
   sort: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  使用<code>sort</code>类型来绑定<code>sort</code>事件.
</dt>
<dd>
<pre><code>$('.selector').bind('sort', function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-change">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-change">change</a></h3>
    <dl>
      <dt class="event-type-label">类型:</dt>
        <dd class="event-type">sortchange</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>这个事件在排序时触发,但是仅仅在对象在DOM中的位置改变时才会触发.</p>
  </div>
  <div class="event-examples">
    <h4>代码示例</h4>
    <dl class="event-examples-list">
    
<dt>
  提供一个回调函数对<code>change</code>事件进行操作.
</dt>
<dd>
<pre><code>$('.selector').sortable({
   change: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  使用<code>sortchange</code>类型来绑定<code>change</code>事件.
</dt>
<dd>
<pre><code>$('.selector').bind('sortchange', function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-beforeStop">

  <div class="event-header">
    <h3 class="event-name"><a href="#event-beforeStop">beforeStop</a></h3>
    <dl>
      <dt class="event-type-label">类型:</dt>
        <dd class="event-type">sortbeforeStop</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>这个事件在排序停止时触犯,但仅仅在placeholder/helper依然存在时触发.</p>
  </div>
  <div class="event-examples">
    <h4>代码示例</h4>
    <dl class="event-examples-list">
    
<dt>
  提供一个回调函数对<code>beforeStop</code>事件进行操作.
</dt>
<dd>
<pre><code>$('.selector').sortable({
   beforeStop: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  使用<code>sortbeforeStop</code>类型来绑定<code>beforeStop</code>事件.
</dt>
<dd>
<pre><code>$('.selector').bind('sortbeforeStop', function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-stop">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-stop">stop</a></h3>
    <dl>
      <dt class="event-type-label">类型:</dt>
        <dd class="event-type">sortstop</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>这个事件在排序停止时触发.</p>
  </div>
  <div class="event-examples">
    <h4>代码示例</h4>
    <dl class="event-examples-list">
    
<dt>
  提供一个回调函数对<code>stop</code>事件进行操作.
</dt>
<dd>
<pre><code>$('.selector').sortable({
   stop: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  使用<code>sortstop</code>类型来绑定<code>stop</code>事件.
</dt>
<dd>
<pre><code>$('.selector').bind('sortstop', function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-update">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-update">update</a></h3>
    <dl>
      <dt class="event-type-label">类型:</dt>
        <dd class="event-type">sortupdate</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>这个事件在用户停止排序并且DOM节点位置发生改变时出发.</p>
  </div>
  <div class="event-examples">
    <h4>代码示例</h4>
    <dl class="event-examples-list">
    
<dt>
  提供一个回调函数对<code>update</code>事件进行操作.
</dt>
<dd>
<pre><code>$('.selector').sortable({
   update: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  使用<code>sortupdate</code>类型来绑定<code>update</code>事件.
</dt>
<dd>
<pre><code>$('.selector').bind('sortupdate', function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-receive">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-receive">receive</a></h3>
    <dl>
      <dt class="event-type-label">类型:</dt>
        <dd class="event-type">sortreceive</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>这个时间在一个已连接的sortable接收到来自另一个列表的元素时触发.</p>
  </div>
  <div class="event-examples">
    <h4>代码示例</h4>
    <dl class="event-examples-list">
    
<dt>
  提供一个回调函数对<code>receive</code>事件进行操作.
</dt>
<dd>
<pre><code>$('.selector').sortable({
   receive: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  使用<code>sortreceive</code>类型来绑定<code>receive</code>事件.
</dt>
<dd>
<pre><code>$('.selector').bind('sortreceive', function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-remove">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-remove">remove</a></h3>
    <dl>
      <dt class="event-type-label">类型:</dt>
        <dd class="event-type">sortremove</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>这个事件在sortable中的元素移除自身列表添加到另一个列表时触发.</p>
  </div>
  <div class="event-examples">
    <h4>代码示例</h4>
    <dl class="event-examples-list">
    
<dt>
  提供一个回调函数对<code>remove</code>事件进行操作.
</dt>
<dd>
<pre><code>$('.selector').sortable({
   remove: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  使用<code>sortremove</code>类型来绑定<code>remove</code>事件.
</dt>
<dd>
<pre><code>$('.selector').bind('sortremove', function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-over">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-over">over</a></h3>
    <dl>
      <dt class="event-type-label">类型:</dt>
        <dd class="event-type">sortover</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>这个事件在一个元素添加到连接列表中时触发.</p>
  </div>
  <div class="event-examples">
    <h4>代码示例</h4>
    <dl class="event-examples-list">
    
<dt>
  提供一个回调函数对<code>over</code>事件进行操作.
</dt>
<dd>
<pre><code>$('.selector').sortable({
   over: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  使用<code>sortover</code>类型来绑定<code>over</code>事件.
</dt>
<dd>
<pre><code>$('.selector').bind('sortover', function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-out">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-out">out</a></h3>
    <dl>
      <dt class="event-type-label">类型:</dt>
        <dd class="event-type">sortout</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>这个事件在一个元素移除连接列表时触发.</p>
  </div>
  <div class="event-examples">
    <h4>代码示例</h4>
    <dl class="event-examples-list">
    
<dt>
  提供一个回调函数对<code>out</code>事件进行操作.
</dt>
<dd>
<pre><code>$('.selector').sortable({
   out: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  使用<code>sortout</code>类型来绑定<code>out</code>事件.
</dt>
<dd>
<pre><code>$('.selector').bind('sortout', function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-activate">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-activate">activate</a></h3>
    <dl>
      <dt class="event-type-label">类型:</dt>
        <dd class="event-type">sortactivate</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>这个事件发生在使用连接列表,每个连接列表在拖动开始准备接受它时触发.</p>
  </div>
  <div class="event-examples">
    <h4>代码示例</h4>
    <dl class="event-examples-list">
    
<dt>
  提供一个回调函数对<code>activate</code>事件进行操作.
</dt>
<dd>
<pre><code>$('.selector').sortable({
   activate: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  使用<code>sortactivate</code>类型来绑定<code>activate</code>事件.
</dt>
<dd>
<pre><code>$('.selector').bind('sortactivate', function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li class="event" id="event-deactivate">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-deactivate">deactivate</a></h3>
    <dl>
      <dt class="event-type-label">类型:</dt>
        <dd class="event-type">sortdeactivate</dd>
    </dl>
  </div>
  <div class="event-description">
    <p>这个事件发生在排序结束后,传播到所有可能的连接列表.</p>
  </div>
  <div class="event-examples">
    <h4>代码示例</h4>
    <dl class="event-examples-list">
    
<dt>
  提供一个回调函数对<code>deactivate</code>事件进行操作.
</dt>
<dd>
<pre><code>$('.selector').sortable({
   deactivate: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  使用<code>sortdeactivate</code>类型来绑定<code>deactivate</code>事件.
</dt>
<dd>
<pre><code>$('.selector').bind('sortdeactivate', function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="methods">
    <h2 class="top-header">方法</h2>
    <ul class="methods-list">
      
<li class="method" id="method-destroy">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
    <dl>
      <dt class="method-signature-label">方法签名:</dt>
        <dd class="method-signature">.sortable( 'destroy'







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>完全移除排序功能. 这将使元素返回到之前的初始化状态.</p>
  </div>
</li>


<li class="method" id="method-disable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-disable">disable</a></h3>
    <dl>
      <dt class="method-signature-label">方法签名:</dt>
        <dd class="method-signature">.sortable( 'disable'







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>关闭排序功能.</p>
  </div>
</li>


<li class="method" id="method-enable">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-enable">enable</a></h3>
    <dl>
      <dt class="method-signature-label">方法签名:</dt>
        <dd class="method-signature">.sortable( 'enable'







)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>打开排序功能.</p>
  </div>
</li>


<li class="method" id="method-option">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">方法签名:</dt>
        <dd class="method-signature">.sortable( 'option', optionName

, <span class="optional">[</span>value<span class="optional">] </span>)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>获取或者设置sortable参数. 如果没有提供参数值则是获取.</p>
  </div>
</li>


<li class="method" id="method-serialize">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-serialize">serialize</a></h3>
    <dl>
      <dt class="method-signature-label">方法签名:</dt>
        <dd class="method-signature">.sortable( 'serialize'

, <span class="optional">[</span>options<span class="optional">] </span>





)</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>序列化一个sortable成为一个form/ajax提交字符串. 调用此方法生产的序列,可以附加到任何URL ,以轻松提交一个新的项目,以便回传到服务器.
</p><p>它的工作原理是默认情况下使用每个项目排序ID使用' setname_number '进行格式化,它吐出了类似"setname[]=number&amp;setname[]=number"这样的散列.
</p><p>您也可以给一个选择散列作为第二个参数,以确定如何实现自定义的功能.允许的选择是:'key' （取代part1[]无论你是否想这样）, 'attribute' （测试另一个属性'id' ）和 'expression'(使用您自己的regexp).
</p><p>如果序列返回一个空字符串,请确保编号属性包括下划线. 他们必须符合以下格式: "set_number"例如, 一个有3个元素的列表使用id和attributes foo_1, foo_5, foo_2 会被序列化为 foo[]=1&amp;foo[]=5&amp;foo[]=2. 你可以使用下划线, 等号或者连字符去分隔set和number.  例如 foo=1 或者 foo-1 或者 foo_1 都序列化为 foo[]=1.</p>
  </div>
</li>


<li class="method" id="method-toArray">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-toArray">toArray</a></h3>
    <dl>
      <dt class="method-signature-label">方法签名:</dt>
        <dd class="method-signature">.sortable( 'toArray' )</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>使sortable的项目序列化一个字符串数组. 如果你有一个
</p>
<pre>
&lt;ul id=&quot;a_sortable&quot;&gt;&lt;br&gt;
&lt;li id=&quot;hello&quot;&gt;Hello&lt;/li&gt;&lt;br&gt;
&lt;li id=&quot;goodbye&quot;&gt;Good bye&lt;/li&gt;&lt;br&gt;
&lt;/ul&gt;
</pre>
<p>并且执行
</p>
<pre>var result = $('#a_sortable').sortable('toArray');</pre>
<p>那么
</p>
<pre>result[0] 则包含 &quot;hello&quot; ,result[1] 则包含 &quot;goodbye&quot;.</pre></p>
  </div>
</li>

<p>
<li class="method" id="method-refresh">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-refresh">refresh</a></h3>
    <dl>
      <dt class="method-signature-label">方法签名:</dt>
        <dd class="method-signature">.sortable( 'refresh' )</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>刷新sortable项目. 自定义触发所有sortable项目的重新加载, 以使新项目得到承认.</p>
  </div>
</li>


<li class="method" id="method-refreshPositions">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-refreshPositions">refreshPositions</a></h3>
    <dl>
      <dt class="method-signature-label">方法签名:</dt>
        <dd class="method-signature">.sortable( 'refreshPositions' )</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>刷新缓存中的sortable项目的位置. 调用此方法将刷新所有缓存中sortable项目的位置. 这通常是脚本自动完成的并且会降低性能. 请慎重使用.</p>
  </div>
</li>


<li class="method" id="method-cancel">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-cancel">cancel</a></h3>
    <dl>
      <dt class="method-signature-label">方法签名:</dt>
        <dd class="method-signature">.sortable( 'cancel' )</dd>
    </dl>
  </div>
  <div class="method-description">
    <p>取消当前sortable中的一个变更并且将该元素恢复到它上一次所在的位置.在结束和接收回调中很有用.
</p><p>如果排序元素不是从连接列表中的一个移动到另一个:
</p>
<pre>$(this).sortable('cancel');</pre>
<p>便可取消变更.
</p><p>如果排序元素是从连接列表中的一个移动到另一个:
</p>
<pre>$(ui.sender).sortable('cancel');</pre>
<p>便可取消变更. 在'receive'回调中很有用.</p>
  </div>
</li>

    </ul>
  </div>
  <div id="theming">
    <h2 class="top-header">主题</h2>
    <p>jQuery UI Sortable插件使用jQuery UI CSS 框架的外观和风格，包括颜色和背景纹理.我们建议您使用ThemeRoller工具来创建和下载的自定义主题，很容易建立和维护.
</p>
  <p>如果有更深层次的个性化需要，有特定类别的工具ui.sortable.css样式可供参考，可以修改这些参考。这些课程是下面以高亮和粗体显示的。
</p>
    
  <h3>jQuery UI CSS Framework classes示例</h3>
  &lt;ul class=&quot;<strong>ui-sortable</strong>&quot;&gt;<br />
&#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
&#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
&#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
&lt;/ul&gt;
  <p class="theme-note">
    <strong>
      Note: 注：这是一个示例sortable插件所产生的标记,而不是你应该使用的标记.创建一个sortable唯一需要的标记是 <br />&lt;ul&gt;<br />
&#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
&#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
&#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
&lt;/ul&gt;.
    </strong>
  </p>

  </div>
</div>

</p><!-- 
Pre-expand include size: 68721 bytes
Post-expand include size: 119835 bytes
Template argument size: 69824 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3068-1!1!0!!en!2 and timestamp 20090303120119 -->


						<!-- end content -->
		</div>
	</div>
		</div>
				</div><!-- /#primaryContent -->				
			</div><!-- /#content -->
	</div><!-- /#siteContain -->	
	</body>
<!-- Cached 20090303115837 -->
</html>
